<!-- EditModule.vue（子组件） -->
<template>
  <div class="edit-area" @focusout="handleBlur">
    <hr v-if="isEditing" />
    <hr v-if="isMousing" class="dashed-line" />

    <!--   正文-->
    <el-input
        ref="textarea"
        type="textarea"
        v-model="localValue"
        input-style="edit-box"
        :placeholder="placeholder"
        :autosize="true"
        @focus="handleFocus"
        v-if="indexModel === 'context'"
        @mouseleave="clearShadow"
        @mouseenter="showShadow"
    />
    <!--   一级标题-->
    <div class="centreTitle">
      <el-input
          @focus="handleFocus"
          v-if="indexModel === 'titleOne'"
          class = "title-one-input"
          placeholder="主标题,请输入内容"
          v-model="localValue"
          @mouseleave="clearShadow"
          @mouseenter="showShadow"
      >
      </el-input>
    </div>

    <!--   二级标题-->
    <el-input
        @focus="handleFocus"
        v-if="indexModel === 'titleTwo'"
        input-style="edit-box"
        placeholder="副标题,请输入内容"
        class = "title-two-input"
        v-model="localValue"
        @mouseleave="clearShadow"
        @mouseenter="showShadow"
    >

    </el-input>

    <div class="button-group" v-if="isEditing">
      <button class="cancel-button" @click="handleCancel" @mousedown.prevent>
        {{ '取消'}}
      </button>
      <button class="sure-button"  @click.stop="handleSure" @mousedown.prevent>
        {{ '确认'}}
      </button>
    </div>

    <hr v-if="isMousing" class="dashed-line" />
    <hr v-if="isEditing" />
  </div>


</template>

<script setup lang="ts">
import {ref, defineProps, defineEmits, watch, onMounted} from 'vue';
import {updateDetailModeSideBarApi} from "@/api/modules/detailModel/detailModeSideBar";
import type {DetailModeSideBarForm} from "@/api/types/detailmodel/detailModeSideBar";
import {ElMessage} from "element-plus";

// 1. 定义可定制的Props（父组件传递）
const props = defineProps({
  placeholder: {
    type: String,
    default: '请输入内容'
  },
  modelValue: String,   // 双向绑定的输入值（父组件传递）
  indexModel: String,   // 双向绑定的输入值（父组件传递）
  node: {},   // 双向绑定的输入值（父组件传递）
  boxId: Number
});

// 2. 定义组件内部状态（每个模块独立）
const isEditing = ref(false);  // 是否处于编辑模式（焦点状态）
const isMousing = ref(false);  // 是否处于编辑模式（焦点状态）
const localValue = ref(props.modelValue);  //初始默认值


// 3. 定义事件（向父组件传递交互结果）
const emit = defineEmits(['update:modelValue']);

// 4. 处理焦点事件
const handleFocus = () => {
  isEditing.value = true;
  clearShadow()
};

const handleBlur = () => {
  console.log('触发了离开方法')
  isEditing.value = false;
};

const showShadow = () => {
  if (isEditing.value === false) {

    isMousing.value = true;
  }
};

const clearShadow = () => {
  isMousing.value = false;
};


// 5. 处理按钮点击事件
const handleCancel = () => {
  isEditing.value = false;
};


const handleSure = () => {
  emit('update:modelValue', props.node,localValue.value);  // 双向绑定更新父组件值
  //更新
  let update : DetailModeSideBarForm ={
    id: props.boxId,
    label: localValue.value
  }

  console.log('sadfasdfaweerfwefasdfwe',update)
  updateDetailModeSideBarApi(update).then(res =>{
    ElMessage.success("修改成功")
  })

  isEditing.value = false;  // 确认后退出编辑模式
};


// 6. 监听父组件传递的modelValue变化（同步到组件内部）
watch(localValue,(newValue,oldValue)=>{
  console.log('感应到了test',oldValue)
  console.log('传给父ID与val',newValue)
  emit('update:modelValue',props.node,newValue)
})

</script>

<style scoped>  /* scoped样式：仅作用于当前组件 */
.edit-area {
  position: relative;
  margin-top: 10px;
  width: 100%;

  /* 设置虚线 */
  .dashed-line {
    border-top: 1px dashed black;  /* 设置虚线边框 */
  }

  :deep(.el-textarea__inner) {
    color: black ;
    box-shadow: none;
  }

  :deep(.el-input__wrapper) {
    box-shadow: none;
  }

  :deep(.el-input__inner) {
    color: black ;
  }

  .edit-box {
    position: relative;
    width: 100%;
    padding: 12px 15px;
    font-size: 14px;
    color: black;
    outline: none;
    box-sizing: border-box;
  }

  .centreTitle{
    position: relative;
    :deep(.el-input__inner) {
      text-align: center;
    }

    .title-one-input {
      position: relative;
      width: 100%;
      padding-left: 20px;  /* 适当的左右内边距 */
      padding-right: 20px;
      font-size: 24px;
      color: black;
      outline: none;
      box-sizing: border-box;
      text-align: center; /* 水平居中文本 */
    }
  }

  /* 二级标题 */
  .title-two-input {
    position: relative;
    width: 100%;
    padding-left: 20px;  /* 适当的左右内边距 */
    padding-right: 20px;
    font-size: 16px;
    color: black;
    outline: none;
    box-sizing: border-box;
    text-align: center; /* 水平居中文本 */
  }

  .button-group {
    position: relative;
    width: 100%;

    .sure-button {
      margin-left: 10px;
      background-color: transparent;
      border: 2px solid lightskyblue;
      color: lightskyblue;
      padding: 4px 6px;
      font-size: 16px;
      cursor: pointer;
      border-radius: 5px;
      transition: background-color 0.3s ease;
      position: absolute;
      display: inline-flex;
      align-items: center;
      right: 0;
      bottom: 0;
    }

    .cancel-button {
      margin-left: 10px;
      background-color: transparent;
      border: 2px solid lightskyblue;
      color: lightskyblue;
      padding: 4px 6px;
      font-size: 16px;
      cursor: pointer;
      border-radius: 5px;
      transition: background-color 0.3s ease;
      position: absolute;
      display: inline-flex;
      align-items: center;
      right: 50px;
      bottom: 0;
    }

    .sure-button:hover {
      background-color: rgba(255, 192, 203, 0.3);
    }
  }
}


</style>
